<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <title>CSS Cookbook: media objects</title>

    <link rel="stylesheet" href="styles.css" />

    <style>
      img {
        max-width: 100%;
        display: block;
      }
      p {
        margin: 0 0 1em 0;
      }
    </style>

    <style class="editable">
      @media (min-width: 500px) {
        /* clearfix*/
        .media:after {
          content: "";
          display: table;
          clear: both;
        }

        .media {
          display: grid;
          grid-template-columns: fit-content(200px) 1fr;
          grid-template-rows: 1fr auto;
          grid-template-areas:
            "image content"
            "image footer";
          grid-gap: 20px;
          margin-bottom: 4em;
        }

        .media-flip {
          grid-template-columns: 1fr fit-content(200px);
          grid-template-areas:
            "content image"
            "footer image";
        }

        .img {
          float: left;
          margin-right: 20px;
          max-width: 200px;
          grid-area: image;
        }

        .media-flip .img {
          float: right;
          margin: 0 0 0 20px;
        }

        .content {
          grid-area: content;
        }

        .footer {
          grid-area: footer;
        }

        @supports (display: grid) {
          .media:after {
            content: none;
          }

          .img,
          .media-flip .img {
            max-width: 100%;
            margin: 0;
          }
        }
      }
    </style>
  </head>

  <body>
    <section class="preview">
      <div class="media">
        <div class="img">
          <img src="balloon-sq2.jpg" alt="Balloons" />
        </div>

        <div class="content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
            vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac
            porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
            aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent
            quis risus id dolor venenatis condimentum.
          </p>
        </div>
        <div class="footer">An optional footer goes here.</div>
      </div>

      <div class="media">
        <div class="img">
          <img src="sharp-account_box-24px.svg" width="80px" alt="Account" />
        </div>
        <div class="content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
            vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac
            porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
            aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent
            quis risus id dolor venenatis condimentum.
          </p>
        </div>
        <div class="footer"></div>
      </div>

      <div class="media media-flip">
        <div class="img">
          <img src="balloon-sq2.jpg" alt="Balloons" />
        </div>

        <div class="content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
            vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac
            porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
            aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent
            quis risus id dolor venenatis condimentum.
          </p>
        </div>
        <div class="footer">An optional footer goes here.</div>
      </div>

      <div class="media">
        <a class="img">
          <img src="balloon-sq2.jpg" alt="Balloons" />
        </a>

        <div class="content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
            vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac
            porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
            aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent
            quis risus id dolor venenatis condimentum.
          </p>
        </div>

        <div class="footer"></div>

        <div class="media">
          <a class="img">
            <img src="balloon-sq2.jpg" alt="Balloons" />
          </a>

          <div class="content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
              vehicula vitae ligula sit amet maximus.
            </p>
          </div>

          <div class="footer"></div>
        </div>
      </div>
    </section>

    <textarea class="playable playable-css" style="height: 950px">
@media (min-width: 500px) {
  /* clearfix*/
  .media:after {
    content: "";
    display: table;
    clear: both;
  }

  .media {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "image content"
      "image footer";
    grid-gap: 20px;
    margin-bottom: 4em;
  }

  .media-flip {
    grid-template-columns: 1fr fit-content(200px);
    grid-template-areas:
      "content image"
      "footer image";
  }

  .img {
    float: left;
    margin-right: 20px;
    max-width: 200px;
    grid-area: image;
  }

  .media-flip .img {
    float: right;
    margin: 0 0 0 20px;
  }

  .content { grid-area: content;}

  .footer { grid-area: footer; }

  @supports(display: grid) {
    .media:after {
      content: none;
    }
    .img,
    .media-flip .img{
      max-width: 100%;
      margin: 0;
    }
  }
}</textarea
    >

    <textarea class="playable playable-html" style="height: 300px">
<div class="media">

  <div class="img">
    <img src="balloon-sq2.jpg" alt="Balloons">
  </div>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p>
  </div>
  <div class="footer">
    An optional footer goes here.
  </div>
</div>

<div class="media">

<div class="img">
  <img src="sharp-account_box-24px.svg" width="80px" alt="Account">
</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p>
</div>
<div class="footer"></div>
</div>

<div class="media media-flip">

<div class="img">
    <img src="balloon-sq2.jpg" alt="Balloons">
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p>
</div>
<div class="footer">
    An optional footer goes here.
</div>
</div>

<div class="media">

<a class="img">
    <img src="balloon-sq2.jpg" alt="Balloons">
</a>

<div class="content">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p>
</div>

<div class="footer"></div>

<div class="media">

    <a class="img">
    <img src="balloon-sq2.jpg" alt="Balloons">
    </a>

    <div class="content">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. </p>
    </div>

    <div class="footer"></div>

</div>

</div></textarea
    >

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script src="playable.js"></script>
</html>
